<template>
    <div>
      <div id="top">
          <div class="form">
            <img src="../assets/搜索.png" v-on:click="search">
            <input id="text" name="keyword"  type="text" class="form-control"
                   placeholder="请搜索..." v-model="keyword">
          </div>
      </div>
      <div class="main">
        <yd-flexbox v-for="s in info.data" class="item">
          <yd-flexbox-item class="picBox">
            <img class="pic"  v-bind:src="header+s.popularScienceImgPath"/>
          </yd-flexbox-item>
          <yd-flexbox-item>
            <router-link :to="{name:'ScienceDetail',params:{id:s.id}}">
              <p><strong>{{s.popularScienceTitle}}</strong></p>
              <p class="textAbs">
                {{s.popularScienceAbs}}
              </p>
            </router-link>
          </yd-flexbox-item>
        </yd-flexbox>

        <div id="notFind" class="col-xs-12" v-if="info.code==500">
          <p>当前查询没有结果</p>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
      name: "Science",
      data() {
        return {
          header:"https://sy.mujiwulian.net/sy/",
          keyword:"",
          company:{
            sy:null,
          },
          info:{
            "code": 200,
            "msg": "success",
            "data": [
              {
                id:null ,
                popularScienceTitle: "",
                popularScienceImgPath: null,
                popularScienceAbs: ""
              }
            ]
          }
        }
      },
      methods:{
        getQueryString:function(name) {
          let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
          let r = window.location.hash.substr(8).match(reg);
          if (r != null) return unescape(r[2]);
          return null;
        },
        search:function(){
          this.$axios
            .get("https://sy.mujiwulian.net/sy/website/science/?" +
              "sy="+this.company.sy+"&keyword="+this.keyword)
            .then(response=>(this.info=response.data));
        }
      },
      mounted() {
        this.company.sy=this.getQueryString("sy");
        if(this.company.sy==null){
          this.company.sy=this.$store.getters.getUser.sy;
          if(this.company.sy==null){
            alert("抱歉，出错了，未找到公司sy，请返回公众号重试！");
          }
        }
        this.$axios
          .get("https://sy.mujiwulian.net/sy/website/science/?sy="+this.company.sy)
          .then(response=>(this.info=response.data));
        //保存sessionStorage
        this.$store.dispatch("asyncUpdateUser",this.company);
      },
    }
</script>

<style scoped>
  *{
    margin: 0px;
    padding: 0px;
  }
  #top{
    width: 100%;
    height: 150px;
    background: url(../assets/公众号-背景@2x.png) no-repeat center;
    background-size: 100% 100%;
    display: block;
    text-align: center;
  }
  #top .form{
   padding-top: 60px;
  }
  #top img{
    height:30px;
    width: 30px;
    position: absolute;
    top: 60px;
  }
  #top input{
    height: 30px;
    border-radius: 38px;
    background-color: white;
    width: 60%;
    text-align: center;
    font-size: 20px;
  }
  .main>.item{
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .main .picBox{
    width: 50%;
    display: block;
    text-align: center;
  }
  .main .picBox>img{
    width: 80%;
    height: auto;
  }
  .main .textAbs{
    text-indent: 2em;
    margin-top: 5px;
    font-size: 10px;
    margin-right: 5px;
  }

  #notFind{
    margin-top: 35px;
    text-align: center;
    color: red;
  }
</style>
